<template>
	<view>
		<view v-if="voice" class="flex mb-20" @click="playVoice">
			<view class="voice mr-30">
				<image :class="{'play':play}" src="@/static/btn_yuyin.png" mode=""></image>
				<view>{{recordTime}}′′</view>
			</view>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		name: "n-voice",
		data() {
			return {
				recordTime: '',
				play: false
			};
		},
		props: ['voice'],
		// watch:{
		// 	voice:function(){
		// 		console.log('111------=-=--=-=-=-=-=-=-')
		// 		innerAudioContext.src = this.voice;
		// 		innerAudioContext.onCanplay(() => {
		// 			let intervalID = setInterval(() => {
		// 				if (innerAudioContext.duration !== 0) {
		// 					clearInterval(intervalID);
		// 					console.log("音频时长", innerAudioContext.duration);
		// 					this.recordTime = Math.round(innerAudioContext.duration)
		// 				}
		// 			}, 500);
		// 		});
		// 	}
		// },
		mounted() {
			setTimeout(() => {
				console.log('111------=-=--=-=-=-=-=-=-')
				innerAudioContext.src = this.voice;
				innerAudioContext.onCanplay(() => {
					let intervalID = setInterval(() => {
						if (innerAudioContext.duration !== 0) {
							clearInterval(intervalID);
							console.log("音频时长", innerAudioContext.duration);
							this.recordTime = Math.round(innerAudioContext.duration)
						}
					}, 500);
				});
			}, 1000)
		},
		methods: {
			playVoice() {
				innerAudioContext.src = this.voice;
				if (this.play) {
					this.play = false
					innerAudioContext.stop();
				} else {
					console.log(this.voice)
					innerAudioContext.play();
					innerAudioContext.onPlay((e) => {
						this.play = true
					});
				}
				innerAudioContext.onEnded((e) => {
					this.play = false
				});
				innerAudioContext.onStop((e) => {
					this.play = false
				});
			},
		}
	}
</script>

<style lang="scss">
	.voice {
		width: 229upx;
		height: 48upx;
		background: rgba(81, 157, 118, .12);
		border-radius: 24upx;
		font-size: 26upx;
		line-height: 48upx;
		color: #519D76;
		@include flex-between;
		padding: 0 20upx;

		image {
			width: 30upx;
			height: 30upx;
		}
	}

	.play {
		animation-name: flickering;
		animation-duration: 1500ms;
		animation-iteration-count: infinite;
	}

	@keyframes flickering {
		0% {
			opacity: 1;
		}
		50% {
			opacity: .3;
		}
		100% {
			opacity: 1;
		}
	}
</style>
